<template>
  <div class="users" v-loading="loading">
    <section class="info-container">
      <el-descriptions class="descriptions-list" size="large" border>
        <template #title>
          <div class="descriptions-title">
            <el-icon class="descriptions-title-icon">
              <Connection />
            </el-icon>
            <span>所有人员</span>
          </div>
        </template>
        <template #extra>
          <el-button @click="$router.push({ path: '/users/create' })" v-if="isHavePerToAddUser">
            <el-icon>
              <Plus />
            </el-icon>
          </el-button>
          <el-button @click="toggleUsersEditMode"
            v-if="usePermission.systemPermission.includes(1) || usePermission.systemPermission.includes(6) || this.usePermission.systemPermission.includes(8)">
            <el-icon v-if="usersEditMode">
              <Check />
            </el-icon>
            <el-icon v-else>
              <Edit />
            </el-icon>
          </el-button>
        </template>
      </el-descriptions>
      <el-table :data="users" border>
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="name" label="名字" />
        <el-table-column prop="role.name" label="身份" />
        <el-table-column v-if="usersEditMode" prop="role.name" label="操作">
          <template v-slot="scope">
            <el-button circle type="primary" @click="openEditUserDialog(scope.row)"
              v-if="usePermission.systemPermission.includes(1) || usePermission.systemPermission.includes(6) || this.usePermission.systemPermission.includes(6)">
              <el-icon>
                <Edit />
              </el-icon>
            </el-button>
            <el-button circle type="info" @click="openEditUserPasswordDialog(scope.row)">
              <el-icon>
                <Key />
              </el-icon>
            </el-button>
            <el-button circle type="danger" @click="openDeleteUserConfirmMessageBox(scope.row)"
              v-if="usePermission.systemPermission.includes(1) || usePermission.systemPermission.includes(1) || this.usePermission.systemPermission.includes(8)">
              <el-icon>
                <Delete />
              </el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
  </div>
  <EditUserDialog ref="edit_user_dialog" @update="updateUsers"></EditUserDialog>
  <EditUserPasswordDialog ref="edit_user_password_dialog"></EditUserPasswordDialog>
  <!-- <Loading :isLoading="loading" /> -->
</template>

<script>
import { post } from '../../../utils/common/api'

export default {
  data() {
    return {
      users: [
        // {
        //   id: 10000,
        //   name: "ROOT (Genius Monkeyhbd)",
        //   role: {
        //     id: 1,
        //     name: "root"
        //   }
        // },
        // {
        //   id: 20000,
        //   name: "Genius Monkeyhbd",
        //   role: {
        //     id: 1,
        //     name: "root"
        //   }
        // }
      ],

      usersEditMode: false,

      loading: false,
    };
  },

  computed: {
    isHavePerToAddUser() {
      return this.usePermission.systemPermission.includes(1) || this.usePermission.systemPermission.includes(3)
    }
  },

  methods: {
    openEditUserDialog(user) {
      this.$refs.edit_user_dialog.setUser(user.id, user)
      this.$refs.edit_user_dialog.openDialog()
    },

    toggleUsersEditMode() {
      this.usersEditMode = !this.usersEditMode
    },

    async updateUsers() {
      this.loading = true
      const res = await post('/user/all', {})
      this.users = res.list
      this.loading = false
    },

    openDeleteUserConfirmMessageBox(user) {
      var that = this
      ElMessageBox.confirm(
        `将人员 ${user.name} (${user.id}) 从系统中移除？`,
        '警告',
        {
          confirmButtonText: '移除',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(function () {
        that.deleteUser(user)
      })
    },

    deleteUser(user) {
      var that = this
      post('/user/delete', {
        id: user.id
      }).then(function (res) {
        ElNotification({
          title: '删除成功',
          message: `成功将人员 ${user.name} (${user.id}) 从系统中移除`,
          type: 'success',
          position: 'bottom-right',
        })
        that.updateUsers()
      })
    },

    openEditUserPasswordDialog(user) {
      this.$refs.edit_user_password_dialog.setUser(user.id)
      this.$refs.edit_user_password_dialog.openDialog()
    }
  },

  mounted() {
    this.updateUsers()
  }
}
</script>

<style scoped>
.info-container {
  padding: 20px 0;
}

.descriptions-list {
  width: 100%;
}

.descriptions-title {
  display: flex;
  align-items: center;
}

.descriptions-title-icon {
  margin-right: 8px;
}</style>
